/**
 * 这种看起来可能有些奇怪的标签语法既不是字符串也不是 HTML。
 它被称为 JSX， 一种 JavaScript 的语法扩展。 我们推荐在 React 中使用 JSX 来描述用户界面。
 JSX 是在 JavaScript 内部实现的。
 我们知道元素是构成 React 应用的最小单位，JSX 就是用来声明 React 当中的元素。
 与浏览器的 DOM 元素不同，React 当中的元素事实上是普通的对象，React DOM 可以确保 浏览器 DOM 的数据内容与 React 元素保持一致。
 要将 React 元素渲染到根 DOM 节点中，我们通过把它们都传递给 ReactDOM.render() 的方法来将其渲染到页面上：
 **/
import React from "react";
import  {List} from './list'
import  {SearchPanel} from './searchPanel'

import {useEffect, useState} from "react";
import * as qs from "qs";
import {cleanObject, useDebounce, useMount} from "../../utils/index";


const  serverUrl=process.env.REACT_APP_SERVER_URL;



export  const ProjectListScreen=()=>{
    //状态提升到父组件
    //项目列表
    const [list,setList]=useState([]);
    //
    const[param,setParam]=useState({
        name: '',               //项目名
        personId: ''            //项目负责人
    });

    const debouncedParam=useDebounce(param,2000);

    const [users,setUsers]=useState([]);

    //接口请求,param改变的时候，同步请求项目列表
    //优化每次请求，改为debouncedParam
    useEffect(()=>{
         fetch(`${serverUrl}/projects?${qs.stringify(cleanObject(debouncedParam))}`).then(async response=>{
             if(response.ok){
                    setList(await  response.json())
             }
         })
    },[debouncedParam])

    //初始化users
    // useEffect(()=>{
    //     fetch(`${serverUrl}/users`).then(async response=>{
    //         if(response.ok){
    //             setUsers(await  response.json())
    //         }
    //     })
    // },[])

    useMount(()=>{
        fetch(`${serverUrl}/users`).then(async response=>{
            if(response.ok){
                setUsers(await  response.json())
            }
        })
    })

    return <div>
        <SearchPanel users={users}  param={param}  setParam={setParam}  />
        <List   list={list}  users={users} />
    </div>
}